<template>
  <el-dialog title="数据导入结果" :visible.sync="visible" width="80%" :before-close="close">
    <p>
      <el-link type="success" :underline="false">成功导入数据【{{successL.length}}】条</el-link>
    </p>
    <p class="mt-20">
      <el-link type="danger" :underline="false">共有【{{errorL.length}}】条异常数据</el-link>
      <el-link type="primary" class="ml-10" @click="downLoad" v-if="errorL.length!=0">点击下载查看全部失败原因</el-link>
    </p>

    <el-table
      border
      :data="errorL.slice(0,10)"
      style="width: 100%"
      size="small"
      class="mt-10"
      v-if="errorL.length<=100&&errorL.length!=0"
    >
      <el-table-column label="序号" type="index" width="70"></el-table-column>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        v-for="item in tableCol"
        :key="item.prop"
      ></el-table-column>
      <el-table-column prop="errMsg" label="异常原因">
        <template slot-scope="scope">
          <el-link type="danger" :underline="false">{{scope.row.errMsg}}</el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { openDownloadDialog } from "@/utils/outPutExcel";
export default {
  props: ["visible", "result", "importData"],
  data() {
    return {
      successL: [],
      errorL: [],
      tableCol: []
    };
  },
  watch: {
    result: {
      immediate: true,
      handler(val) {
        if (val) {
          this.successL = val.successlist.map(o => o.object);
          this.errorL = val.errList.map(o => {
            return Object.assign(o.object, {
              errMsg: o.errMsg
            });
          });
        }
      }
    },
    "importData.fieldList": {
      immediate: true,
      handler(val) {
        if (val) {
          this.tableCol = val;
        }
      }
    }
  },
  methods: {
    close() {
      this.$emit("getResultShow", false);
    },
    downLoad() {
      this.importData["errExport"](this.result.key).then(res => {
        openDownloadDialog(res, this.importData.excelName + "模板异常.xlsx");
      });
    }
  }
};
</script>

<style lang='scss' scoped>
</style>
